$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$width: 82.292vw;

body {
  background: #F7F7F7;
}

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 80vw;
    margin: 8vw auto 3vw auto;
    position: relative;

    .bg {
      width: 100%;
      display: block;
      object-fit: cover;
      min-height:20vw;
      border-radius: 10px;
    }

    .text {
      position: absolute;
      left: 2vw;
      width: 90%;
      top: 50%;
      transform: translateY(-50%);
      .pic1{
        width: 20vw;
      }
      .p2 {
        display: flex;
        align-items: center;
        margin-left: 3vw;
        img:nth-child(1){
          width: 30vw;
        }
        img:nth-child(2){
          transform: translateY(-0.5vw);
          margin-left: 1vw;
          width:6vw;
        }
      }

      a {
        display: inline-block;
        border-radius: 50px;
        background: #FBD687;
        font-size: $fontSize_24;
        color: #801427;
        line-height: 50px;
        padding: 0 35px;
        margin: 2vw 0 0 3vw;
      }
    }
  }

  .main {
    width: 80vw;
    margin: 0 auto;
    padding-bottom: 5vw;
    .t {
      color: #333;
      font-size: $fontSize_32;
    }

    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 2vw;

      .l {
        width: 70%;

        .allItems {
          width: 100%;

          a {
            display: flex;
            justify-content: space-between;
            gap: 2vw;
            margin-bottom: 2vw;

            .pic {
              width: 25%;

              img {
                width: 100%;
                display: block;
                object-fit: cover;
                border-radius: 5px;
                transition: all 600ms;
              }
            }

            .text {
              width: 75%;
              display: flex;
              justify-content: space-between;
              flex-direction: column;

              .p1 {
                color: #000;
                font-size: $fontSize_24;
                margin-bottom: 2vw;
                transition: all 600ms;
              }

              .des {
                color: #000;
                font-size: $fontSize_18;
                line-height: 1.5;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }

              .time {
                font-size: $fontSize_18;
                color: #666;
              }
            }

            &:hover {
              .pic {
                img {
                  transform: scale(1.05);
                }
              }

              .text {
                .p1 {
                  color: #DA353B;
                }
              }
            }
          }
        }
        .pager{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 3vw;
          svg{
            display: block;
          }
          a{
            color: #666;
            font-size: $fontSize_16;
            margin: 0 10px;
          }
        }
      }

      .r {
        width: 23%;

        .section1 {
          background-color: white;
          padding: 2vw;
          border-radius: 10px;

          .t2 {
            color: #333;
            font-size: $fontSize_24;
            display: flex;
            flex-direction: column;
            align-items: center;

            &::after {
              content: '';
              display: block;
              width: 20px;
              height: 4px;
              border-radius: 10px;
              background: #DA353B;
              margin-top: 10px;
            }
          }

          .allItems {
            margin-top: 1.5vw;

            a {
              display: flex;
              justify-content: space-between;
              gap: 20px;
              border-bottom: 1px dashed rgba(153, 153, 153, 0.40);
              padding: 20px 0;

              .pic {
                width: 35%;

                img {
                  width: 100%;
                  display: block;
                  border-radius: 10px;
                  transition: all 600ms;
                }
              }

              .text {
                width: 65%;

                .time {
                  color: #999;
                  font-size: $fontSize_14;
                }

                .st {
                  color: #333;
                  font-size: $fontSize_18;
                  margin-top: 15px;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                }
              }

              &:hover {
                .pic {
                  img {
                    transform: scale(1.05);
                  }
                }
              }
            }

            a:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }
          }
        }

        .section2 {
          background-color: white;
          padding: 2vw;
          border-radius: 10px;
          margin-top: 2vw;
          position: relative;

          .svg1 {
            position: absolute;
            left: 0;
            top: 0;

            svg {
              max-width: 100%;
              object-fit: contain;
            }
          }

          .svg2 {
            position: absolute;
            right: 0;
            bottom: 0;

            svg {
              max-width: 100%;
              object-fit: contain;
            }
          }

          .t2 {
            color: #333;
            font-size: $fontSize_24;
            text-align: center;
            span {
              font-weight: bold;
              color: #DA353B;
            }
            &::after {
              content: '';
              display: block;
              width: 20px;
              height: 4px;
              border-radius: 10px;
              background: #DA353B;
              margin: 10px auto;
            }
          }

          .codes {
            width: 90%;
            margin: 20px auto;

            .item {
              display: flex;
              align-items: center;
              margin-top: 2vw;
              .pic {
                width: 45%;
                border-radius: 6px;
                border: 1px solid #DA353B;
                background: #FFF;
                padding: 5px;
                img {
                  width: 100%;
                  object-fit: contain;
                }
              }

              .text {
                width: 48%;
                text-align: center;
                .p1 {
                  color: #333;
                  font-size: $fontSize_22;
                }

                .tag {
                  border-radius: 20px;
                  background: #DA353B;
                  display: inline-block;
                  padding: 8px 20px;
                  color:white;
                  font-size: $fontSize_18;
                  margin-top: 15px;
                }
              }
            }
            .item:last-child{
              .text{
                .tag{
                  background: #F1586C;
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 50px;
    .banner{
      .bg{
        height: 150px;
      }
      .text{
        .pic1{
          width: 100px;
        }
        .p2{
          p{
            font-size: 18px;
          }
          img:nth-child(1){
            width: 200px;
          }
          img:nth-child(2){
            width:60px;
          }
        }
        a{
          font-size: 14px;
          padding: 0 25px;
          line-height: 35px;
          margin-top: 15px;
        }
      }
    }
    .main{
      margin: 20px auto;
      .t{
        font-size: 24px;
      }
      .content{
        margin-top: 20px;
        flex-direction: column;
        .l{
          width: 100%;
          .allItems{
            a{
              flex-direction: column;
              margin-bottom: 30px;
              .pic{
                width: 100%;
              }
              .text{
                width: 100%;
                .p1{
                  font-size: 18px;
                  margin: 15px 0;
                }
                .des{
                  font-size: 16px;
                  margin-bottom: 10px;
                }
                .time{
                  font-size: 14px;
                }
              }
            }
          }
          .pager{
            a{
              font-size: 16px;
            }
          }
        }
        .r{
          width: 100%;
          margin-top: 30px;
          .section1{
            padding: 20px;
            .t2{
              font-size: 18px;
            }
            .allItems{
              a{
                .text{
                  .time{
                    font-size: 14px;
                  }
                  .st{
                    font-size: 16px;
                  }
                }
              }
            }
          }
          .section2{
            padding: 20px;
            .t2{
              font-size: 18px;
            }
            .codes{
              .item{
                margin-top: 20px;
                .text{
                  .p1{
                    font-size: 16px;
                  }
                  .tag{
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}